<template>
    <div class="search-area">
        <div class="search-top">
            <div>
                <span class="fa fa-search"></span>
                <input v-model="areaNum" type="text" placeholder="请输入搜索国家" />
            </div>
            <span @click="closeAreaPage">取消</span>
            <div class="inquire" v-show="inquireShow">
                <p @click="giveFatheAreaCodeNum(item.name,item.id)" v-for="(item,index) in inquireList" :key="index">
                    <span>{{item.name}}</span>
                    <span></span>
                </p>
            </div>
        </div>

        <div class="contain">
            <mt-index-list>
                <mt-index-section
                    v-for="(item,index) in countryList"
                    :key="index"
                    :index="item.header"
                >
                    <mt-cell
                        @click.native="giveFatheAreaCodeNum(v.name,v.id)"
                        v-for="(v,index) in item"
                        :key="index"
                        :title="v.name"
                    ></mt-cell>
                </mt-index-section>
            </mt-index-list>
        </div>
    </div>
</template>
<script>
import { IndexList, IndexSection } from "mint-ui";
export default {
    data() {
        return {
            areaNum: "", //输入框内容
            inquireList: [], //查询输入框中所的国家
            countryList: [], //国家初始化列表
            inquireShow: false //控制查询是显示查询框
        };
    },
    created() {
        this.gainCountryList();
    },
    watch:{
        areaNum(){
             if(this.areaNum != ''){
                this.inquireShow = true
            }else{
                this.inquireShow = false
            }
            console.log(this.areaNum)
            var params = {
                countryName:this.areaNum
            }
            this.SelectCountrys(params)
        }
    },
    methods: {
        closeAreaPage() {
            this.$emit("getAreaPage", false);
        },
        //获取国家列表
        gainCountryList() {
            this.$axios.get(this.address.gainListCountry).then(res => {
                //console.log(res.data)
                this.countryList = res.data;
                //console.log(Object.keys(res.data))
                var countryLength = Object.keys(res.data);
                for (var i = 0; i < countryLength.length; i++) {
                    this.countryList[countryLength[i]].header =
                        countryLength[i];
                }
                console.log(this.countryList);
            });
        },
        //模糊查询国家信息
        SelectCountrys(params) {
            this.$axios
                .get(this.address.searchArea, {
                    params: params
                })
                .then(res => {
                    console.log(res.data.data);
                    this.inquireList = res.data.data;
                });
        },
        //给父组件传递区号
        giveFatheAreaCodeNum(name, id) {
            this.$emit("getPhoneArea", name, id);
            this.closeAreaPage();
        }
    }
};
</script>
<style lang="less" scoped>
.search-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: scroll;
    background-color: #fff;
}
.search-top {
    font-size: 16px;
    border-bottom: 1px solid @blackColor1;
    position: relative;
    input {
        width: 70%;
        border: none;
        margin-left: 10px;
        font-size: 12px;
    }
    .flexBetweenCenter();
    height: 50px;
    padding: 0 15px;
    color: @blackColor5;
    span:last-child {
        color: @blueColor5;
    }
}
.inquire {
    position: absolute;
    left: 0;
    top: 50px;
    width: 100%;
    max-height: 40vh;
    overflow: scroll;
    padding: 0 15px;
    z-index: 9999;
    background-color: #fff;
    p {
        padding: 15px 0;
        border-bottom: 1px solid #eee;
        .flexBetweenCenter;
    }
}
</style>
